<template>
  <div class="home-content">
    <div class="off-mask" v-if="deviceInfo.offOn === 0"></div>
    <div class="mode">
      <div class="mode-left">
        <div class="title">模式</div>
        <!-- 选择模式弹出 start -->
        <van-popover v-model:show="showModePopover">
          <div class="mode-body">
            <div
              :class="['item', currentMode === item.value ? 'active' : '']"
              v-for="item in modeItems"
              :key="item.value"
              @click="() => onModeClick(item)"
            >
              <SvgIcon
                :iconName="item.svg"
                :color="currentMode === item.value ? 'var(--primary-color)' : '#999'"
                size="25px"
              />
              <div class="text">{{ item.text }}</div>
            </div>
          </div>
          <template #reference>
            <div>
              <div class="btn">
                <SvgIcon iconName="auto" color="#fff" size="25px" />
                <div class="text">{{ modeTitle }}</div>
                <!-- 以下是有旋转动画的 -->
                <!-- :style="{ transform: arrowRotation, transition: arrowTransition }" -->
                <SvgIcon
                  :style="{ transform: arrowRotation }"
                  class="arrow"
                  iconName="down-arrow"
                  color="#fff"
                  size="10px"
                />
              </div>
              <div class="dropdown-menu"></div>
            </div>
            <!-- <van-button type="primary">浅色风格</van-button> -->
          </template>
        </van-popover>
        <!-- 选择模式弹出 end -->
      </div>
      <div class="mode-right">
        <div class="title">空调</div>
        <div>
          <div class="btn">
            <SvgIcon iconName="btn-settings" color="#fff" size="25px" />
            <div class="text">设置</div>
          </div>
        </div>
      </div>
    </div>
    <div class="gears">
      <div class="title">送风</div>
      <div class="level-slider">
        <SvgIcon iconName="speedSmall" color="#D7E5FC" size="30px" />
        <div class="slider">
          <van-slider
            v-model="blowAir"
            :min="0"
            :max="3"
            active-color="linear-gradient(to right, #3EFFCA, var(--primary-color))"
            @change="onBlowAirChange"
          />
          <div class="level-text">
            <div v-for="item in 4" :key="item">{{ item - 1 }}</div>
          </div>
        </div>
        <SvgIcon iconName="speedLarge" color="#D7E5FC" size="30px" />
      </div>
      <div class="title" style="margin-top: 30px">排风</div>
      <div class="level-slider">
        <SvgIcon iconName="speedSmall" color="#D7E5FC" size="30px" />
        <div class="slider">
          <van-slider
            v-model="dischargeAir"
            :min="0"
            :max="3"
            active-color="linear-gradient(to right, #3EFFCA, var(--primary-color))"
            @change="onDischargeAirChange"
          />
          <div class="level-text">
            <div v-for="item in 4" :key="item">{{ item - 1 }}</div>
          </div>
        </div>
        <SvgIcon iconName="speedLarge" color="#D7E5FC" size="30px" />
      </div>
    </div>
    <div class="action-btns">
      <div class="item" v-for="item in r_actionItems" :key="item.id" @click="onActionClick(item)">
        <div :class="['icon', item.status == 1 ? 'active' : '']">
          <SvgIcon :iconName="item.svg" :color="item.status == 1 ? '#fff' : 'var(--primary-text-color)'" size="25px" />
        </div>
        <div class="title">{{ item.title }}</div>
        <div class="status">
          <span v-if="item.id === 3 && item.status === 1">{{ deviceInfo.time / 60 }}小时后</span>
          {{ item.status === 1 ? item.statusStr : item.statusStr1 }}
        </div>
      </div>
    </div>
    <div class="off-on">
      <div :class="['icon', r_offOn === 1 ? '' : 'off-icon']" @click="handleOffon">
        <SvgIcon iconName="switch" color="#fff" size="25px" />
      </div>
    </div>
  </div>

  <!-- 定时开关 start -->
  <div class="time-pop">
    <van-popup v-model:show="timeShow" round position="bottom">
      <van-picker
        v-model="selectedValues"
        title="定时关"
        confirm-button-text="确定"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onTimeChange"
      />
      <div class="cancel">
        <div class="space"></div>
        <div class="btn" @click="cancleTime">取消定时</div>
        <div class="text">小时 后</div>
      </div>
    </van-popup>
  </div>
  <!-- 定时开关 end -->
</template>

<script setup lang="ts">
import { actionItems, timeOptions, modeItems } from '@/utils/enum.js'
import { ref, reactive, getCurrentInstance, computed, watch } from 'vue'
import { showToast } from 'vant'
import { sendToNative_sendUartData } from '@/utils/base.js'
import { verifySum } from '@/utils/utils.ts'
import { useStore } from 'vuex'
import { modeFilter } from '@/utils/filter'

// store
const store = useStore()
const deviceInfo = computed(() => store.state.deviceInfo)

const modeTitle = ref<string | undefined>('智能')
// 获取到 全局事件总线
const instance = getCurrentInstance()

// 吹风
const dischargeAir = ref<number>(0)
// 排风
const blowAir = ref<number>(0)

const timeShow = ref<boolean>(false)
const showModePopover = ref<boolean>(false)
const columns = reactive(timeOptions())

const r_actionItems = reactive(actionItems)
const selectedValues = ref([0.5])
const r_offOn = ref(1)
const currentMode = ref(0)
// 箭头旋转
const arrowRotation = ref('rotate(0deg)')
// const arrowTransition = ref('transform 0.25s linear')

const updateActionsData = (info: any) => {
  console.log('info===', info)
  const { pdp, anion, time, mode } = info
  if (mode) {
    modeTitle.value = modeFilter(mode)
    console.log(modeFilter(mode))
  }

  r_actionItems[0].status = pdp
  r_actionItems[1].status = anion
  r_actionItems[2].status = time === 0 ? 0 : 1
}
const init = () => {
  const { deviceInfo } = store.state
  updateActionsData(deviceInfo)
  dischargeAir.value = deviceInfo.dischargeAir
  blowAir.value = deviceInfo.blowAir
  if (deviceInfo.time) {
    selectedValues.value = [deviceInfo.time / 60]
  }
  r_offOn.value = deviceInfo.offOn
}
init()

watch(
  () => showModePopover,
  val => {
    console.log('showModePopover==', val.value)
    if (val.value) {
      arrowRotation.value = 'rotate(180deg)'
    } else {
      arrowRotation.value = 'rotate(0deg)'
    }
  },
  { deep: true }
)

watch(
  () => store.state,
  val => {
    console.log('store数据变化了==', val)
    const { deviceInfo } = val
    if (deviceInfo) {
      init()
    }
  },
  { deep: true }
)

// 点击模式事件
const onModeClick = (item: any) => {
  const { value } = item
  console.log(item, '选择了--')
  currentMode.value = value
  modeTitle.value = modeFilter(item.value)
  instance?.proxy?.$Bus.emit('emit-mode', item)
  const data = `0${value}`
  const sum = verifySum(`0204000C01${data}`)
  const hex = `F1F10204000C01${data}${sum}7E`
  sendToNative_sendUartData(hex)

  showModePopover.value = false
}
/**
 * @description 点击事件，点击等离子，负离子，定时开关
 * @description id=1 等离子; id=2 负离子; id=3 定时开关
 * @param {object} item
 */
const onActionClick = (item: any) => {
  alert(11)
  const { pdp, anion } = deviceInfo.value
  if (item.id === 3) {
    timeShow.value = true
  } else if (item.id === 1) {
    // 等离子
    let data = ''
    if (pdp == 1) {
      r_actionItems[0].status = 0
      data = `00`
    } else {
      r_actionItems[0].status = 1
      data = `01`
    }
    const sum = verifySum(`0204000D01${data}`)
    const hex = `F1F10204000D01${data}${sum}7E`
    sendToNative_sendUartData(hex)
  } else if (item.id === 2) {
    // 负离子
    let data = ''
    if (anion == 1) {
      r_actionItems[1].status = 0
      data = `00`
    } else {
      r_actionItems[1].status = 1
      data = `01`
    }
    const sum = verifySum(`0204000F01${data}`)
    const hex = `F1F10204000F01${data}${sum}7E`

    sendToNative_sendUartData(hex)
  }
}

// 定时开关确认时间
const onConfirm = ({ selectedValues }: any) => {
  console.log(selectedValues, 'selectedValues')
  const mins = selectedValues[0] * 60
  const hexMins = mins.toString(16).padStart(4, '0')
  const data = `000B02${hexMins}`
  const sum = verifySum(`0205${data}`)
  const hex = `F1F10205${data}${sum}7E`
  sendToNative_sendUartData(hex)
}
// 定时开关，时间改变时触发的事件
const onTimeChange = ({ selectedValues }: any) => {
  showToast(`当前值: ${selectedValues.join(',')}`)
}
// 定时开关-关闭弹框
const onCancel = () => (timeShow.value = false)

// 排风
const onDischargeAirChange = (val: number) => {
  // F1 F1 02 04 00 09 01 01 00 7E
  console.log(val, 'val')
  dischargeAir.value = val

  const data = `0${val}`
  const sum = verifySum(`0204000901${data}`)
  const hex = `F1F10204000901${data}${sum}7E`
  sendToNative_sendUartData(hex)
}
// 送风
const onBlowAirChange = (val: number) => {
  // F1 F1 02 04 00 0A 01 01 00 7E
  console.log(val, 'val')
  blowAir.value = val
  const data = `0${val}`
  const sum = verifySum(`0204000A01${data}`)
  const hex = `F1F10204000A01${data}${sum}7E`
  sendToNative_sendUartData(hex)
}
const getHexString = (data: string) => {
  const ver = verifySum(`0204000A01${data}`)
  const hex = `F1F10204000A01${data}${ver}7E`
  return hex
}
// 取消定时
const cancleTime = () => {
  const sum = verifySum('0205000B020000')
  console.log('sum===', sum)
  const hex = `F1F10205000B020000${sum}7E`
  sendToNative_sendUartData(hex)
  timeShow.value = false
}
// 开关
const handleOffon = () => {
  console.log('handleOffon')
  let data = ''
  if (deviceInfo.value.offOn == 1) {
    r_offOn.value = 0
    data = `000e0100`
  } else {
    r_offOn.value = 1
    data = `000e0101`
  }
  sendToNative_sendUartData(getHexString(data))
}
</script>
<style lang="less" scoped>
@import url(../../assets/style/content.less);
</style>
